// variables.modules.scss

// 颜色定义
$red: #f5222d;
$orange: #fa541c;
$yellow: #faad14;
$cyan: #13c2c2;
$green: #52c41a;
$blue: #1677ff;
$purple: #722ed1;

// 主题色和模式设置
$modes: (
  light: (
    bgColor: #ffffff,
    bgColor2: #f5f5f5,
    infoColor: #000000,
  ),
  dark: (
    bgColor: #000000,
    bgColor2: #141414,
    infoColor: #ffffff,
  ),
);

$colors: (
  red: (
    primary: $red,
    info: $red,
  ),
  orange: (
    primary: $orange,
    info: $orange,
  ),
  yellow: (
    primary: $yellow,
    info: $yellow,
  ),
  cyan: (
    primary: $cyan,
    info: $cyan,
  ),
  green: (
    primary: $green,
    info: $green,
  ),
  blue: (
    primary: $blue,
    info: $blue,
  ),
  purple: (
    primary: $purple,
    info: $purple,
  ),
);

// 当前主题和模式
$curMode: light;
$curTheme: blue;

// 获取模式变量
@function getModeVar($key) {
  $modeMap: map-get($modes, $curMode);
  @return map-get($modeMap, $key);
}

// 获取颜色
@function getColor($key) {
  $themeMap: map-get($colors, $curTheme);
  @return map-get($themeMap, $key);
}

// 使用主题的混合
@mixin useTheme() {
  @each $key1, $value1 in $modes {
    $curMode: $key1 !global;

    @each $key2, $value2 in $colors {
      $curTheme: $key2 !global;

      html[dark="#{$key1}"][data-theme="#{$key2}"] & {
        @content;
      }
    }
  }
}

// 导出变量
:export {
  red: $red;
  orange: $orange;
  yellow: $yellow;
  cyan: $cyan;
  green: $green;
  blue: $blue;
  purple: $purple;
}
